<{include file="page/header.htm"}>
<link rel="stylesheet" type="text/css" href="/skin/adminhtml/webuploader/webuploader.css">
<div class="page-content">
                <!-- Page Breadcrumb -->
                <div class="page-breadcrumbs">
                    <ul class="breadcrumb">
                        <li>
                            <i class="fa fa-home"></i>
                            <a href="#">单页管理</a>
                        </li>
                        <li class="active">单页列表</li>
                    </ul>
                </div>
                <!-- /Page Breadcrumb -->
                
                <!-- Page Header -->
                <div class="page-header position-relative">
                    <div class="header-title">
                        <h1>
                            单页列表
                        </h1>
                        <small>
                                <i class="fa fa-angle-right"></i>
                                <{if $item}>编辑<{else}>添加<{/if}>单页
                       </small>
                    </div>
                    <!--Header Buttons-->
                    <div class="header-buttons">
                        <a class="sidebar-toggler" href="#">
                            <i class="fa fa-arrows-h"></i>
                        </a>
                        <a class="refresh" id="refresh-toggler" href="">
                            <i class="glyphicon glyphicon-refresh"></i>
                        </a>
                        <a class="fullscreen" id="fullscreen-toggler" href="#">
                            <i class="glyphicon glyphicon-fullscreen"></i>
                        </a>
                    </div>
                    <!--Header Buttons End-->
                </div>
                <!-- /Page Header -->
                <!-- Page Body -->
                <div class="page-body">
                
                  <{include file="page/msg.htm"}>
                
                <div class="row">
                                <div class="col-lg-12 col-sm-12 col-xs-12">
                                    <div class="widget radius-bordered">
                                        <div class="widget-header bg-themeprimary">
                                            <span class="widget-caption"><{if $item}>编辑<{else}>添加<{/if}>单页</span>
                                            <div class="widget-buttons">
                                               <button type="button" class="btn btn-success" onclick="window.location='<{url path='help'}>';"><i class="fa fa-mail-reply-all"></i>返回</button> 
                                            </div>
                                        </div>
                                        <div class="widget-body">
                                            <div class="row">
                                            	<div class="col-sm-6 col-xs-6">
                                                <form id="dataForm" method="post" class="form-horizontal" enctype="multipart/form-data" action="<{url path='help/edit'}>">
                                                 <input type="hidden" name="id" value="">
                                                 
                                                    <div class="form-group">
                                                        <label class="col-lg-4 control-label">标题<span class="red">*</span></label>
                                                        <div class="col-lg-8">
                                                            <input type="text" class="form-control" name="name" datatype="*2-80"  nullmsg="标题不能为空!" errormsg="标题至少2个字符,最多50个字符！" />
                                                        </div>
                                                    </div>
                                                    
                                                   <div class="form-group">
                                                        <label class="col-lg-4 control-label">分类<span class="red">*</span></label>
                                                        <div class="col-lg-8">
                                                            <select class="form-control" name="cat_id" datatype="n" nullmsg="分类不能为空!">
                                                            	<option value="">请选择分类</option>
                                                                <{$categoryHtml}>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    
                                                   <div class="form-group">
                                                        <label class="col-lg-4 control-label">排序<span class="red">*</span></label>
                                                        <div class="col-lg-8">
                                                            <input type="text" class="form-control" name="sort" datatype="n" value="0"  nullmsg="排序不能为空!" errormsg="排序必须是整数！" />
                                                        </div>
                                                    </div>
                                                    
                                                   <div class="form-group">
                                                        <label class="col-lg-4 control-label">封面</label>
                                                        <div class="col-lg-8">
                                                            <input type="file" name="banner"  accept=".jpeg,.jpg,.png,.git,.bmp"/>
                                                            <{if $item->banner }>
                                                            	<a target="_blank" href="<{$item->banner}>"><img src="<{$item->banner}>" width="100" height="50" /></a>
                                                            <{/if}>
                                                        </div>
                                                    </div>
                                                    
                                                    
                                                    <div class="form-group">
                                                        <label class="col-lg-4 control-label">SEO关键字</label>
                                                        <div class="col-lg-8">
                                                            <input type="text" class="form-control" name="seo_keywords"  value="" />
                                                              <p class="help-block">完善SEO关键字能为您的SEO带来更好的效果</p>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="form-group">
                                                        <label class="col-lg-4 control-label">SEO描述</label>
                                                        <div class="col-lg-8">
                                                            <textarea class="form-control" name="seo_description"></textarea>
                                                             <p class="help-block">(注:SEO描述同时也是简短描述)</p>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="form-group">
                                                        <label class="col-lg-4 control-label">展现模式</label>
                                                        <div class="col-lg-8">
                                                        	<select class="form-control" onchange="changModel(this.value)" name="type">
                                                            	<option value="0">文本</option>
                                                                <!-- <option value="1">图片组</option>
                                                                <option value="2">时间轴</option> -->
                                                            </select>
                                                        </div>
                                                    </div>
                                                    
                                                    
                                                    <div class="form-group method-img method-box" style="display:none">
                                                        <label class="col-lg-4 control-label">图片组</label>
                                                        <div class="col-lg-8">
                                                        	<div id="picker" style="display:inline-block">选择文件</div>
                                                            <span class="help-block" style="display:inline-block; margin-left:5px;">可以上传多张图片，大小不得超过3M</span>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="form-group method-img method-box" style="display:none">
                                                    	 <label class="col-lg-4 control-label"></label>
                                                          <div class="col-lg-8">
                                                                 <style type="text/css">
																    #thelist .thumbnail{ width:150px; height:155px; float:left; margin-right:5px; margin-bottom:5px; overflow:hidden}
																	#thelist .thumbnail .info{ width:100%; float:left; text-align:center; margin-top:5px;}
																	#thelist  .bordered-themeprimary{ border-width:2px;}
																	#thelist  .progress{ width:120px; margin:0 auto; margin-top:5px;}
										
																 </style>
                                                                 <input type="hidden" name="goods_img" value="" />
                                                          		<div id="thelist" class="uploader-list">
                                                                		<{if $imgitems}>
                                                                		<{foreach from=$imgitems item=pic}>
                                                                            <div class="file-item thumbnail">
                                                                               <img  style="width:120px; height:120px;" src="<{$pic}>" />
                                                                               <input type="hidden" name="pics[]" value="<{$pic}>" />
                                                                               <div class="progress" style="display: none;">
                                                                                <div class="progress-bar progress-bar-palegreen" style="width: 100%;"></div>
                                                                               </div>
                                                                               <div class="info">
                                                                                <a onclick="removeFileItem(this);" href="javascript:void(0)">删除</a>
                                                                               </div>
                                                                              </div>
                                                                        <{/foreach}>
                                                                       <{/if}>
                                                                </div>
                                                          </div>
                                                    </div>
                                                    
                                                    <div class="form-group method-text method-box" style="display:none">
                                                        <label class="col-lg-4 control-label">内容</label>
                                                        <div class="col-lg-8">
                                                             <textarea id="content" name="content" style="width:700px;height:400px;"></textarea>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="form-group method-time method-box" style="display:none">
                                                        <label class="col-lg-4 control-label">时间轴</label>
                                                        <div class="col-lg-8">
                                                           <input class="btn btn-primary" type="button" value="添加"  onclick="addTimezone();"/><p style="display:inline-block; margin-left:10px;" class="help-block">点击添加追加时间轴</p>
                                                        </div>
                                                    </div>
                                                    
                                                   
                                                   <div class="form-group" style="display:none" id="timezone">
                                                        <label class="col-lg-4 control-label"></label>
                                                        <div class="col-lg-8">
                                                        	 时间:
                                                             <input type="text" class="form-control"  value="" />
                                                             内容:
                                                             <textarea class="form-control"  style=" margin-bottom:3px;"></textarea>
                                                             <button type="button" class="btn btn-danger" onclick="removeTimeZone(this)">删除</button> 
                                                        </div>
                                                    </div>              
                                                    
                                                    <div  id="timezoneList" class="method-time method-box" style="display:none">
                                                    		<{foreach from=$item->timezone item=timecontent key=timekey}>
                                                        <div class="form-group">
                                                        <label class="col-lg-4 control-label"></label>
                                                        <div class="col-lg-8">
                                                        	 时间:
                                                             <input type="text" class="form-control"  value="<{$timekey}>"  name="timezone[time][]"/>
                                                             内容:
                                                             <textarea class="form-control"  style=" margin-bottom:3px;" name="timezone[content][]"><{$timecontent}></textarea>
                                                             <button type="button" class="btn btn-danger" onclick="removeTimeZone(this)">删除</button> 
                                                        </div>
                                                    </div>    
                                                            <{/foreach}>
                                                    </div>       
                                                              
                                                    <div class="form-group">
                                                        <div class="col-lg-offset-4 col-lg-8">
                                                            <input class="btn btn-primary" type="submit" value="提交" />
                                                            <button type="button" class="btn btn-warning" onclick="window.location='<{url path='help'}>';">返回</button> 
                                                        </div>
                                                    </div>
                                            </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>  
                
                </div>
                <!-- /Page Body -->
            </div>
<{include file="page/footer.htm"}>
<script src="/skin/adminhtml/js/form.js"></script>
<script src="/skin/adminhtml/js/Validform.js"></script>
<script src="/skin/adminhtml/js/tools.js"></script>
<script charset="utf-8" src="/skin/adminhtml/assets/js/editors/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="/skin/adminhtml/assets/js/editors/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript" src="/skin/adminhtml/webuploader/webuploader.js"></script>
<script type="text/javascript">
    var UPLOADURL = "<{url path='tools/upload'}>";
	
	function addTimezone()
	{
		$timezone = $("#timezone").clone();
		$timezone.removeAttr('id');
		$timezone.find('input').attr('name','timezone[time][]');
		$timezone.find('textarea').attr('name','timezone[content][]');
		$timezone.show();
		$("#timezoneList").prepend($timezone);
	}
	
	function removeTimeZone(obj)
	{
		$(obj).parent().parent().remove();
	}
	
	function removeFileItem(obj)
	{
		$pobj = $(obj).parent().parent();
		$pobj.remove();
	}
	function changModel(v){
		
		$(".method-box").hide();
		if( typeof(v)=='undefined' || v==0 || v== ""){
			$(".method-text").show();	
		}else if(v == 2){
			$(".method-time").show();
		}else if(v==1){
			$(".method-img").show();
			$("#picker").html("请选择文件")
			
		    var uploader = WebUploader.create({
				// swf文件路径
				swf:  '/skin/adminhtml/webuploader/Uploader.swf',
				// 文件接收服务端。
				server: '<{url path="tools/upload"}>',
				// 选择文件的按钮。可选。
				// 内部根据当前运行是创建，可能是input元素，也可能是flash.
				pick: '#picker',
				// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
				resize: false,
				duplicate: true,//不去重
				accept: {
					title: 'Images',
					extensions: 'gif,jpg,jpeg,bmp,png',
					mimeTypes: 'image/*'
				}
			});
		
			
		// 当有文件添加进来的时候
		uploader.on( 'fileQueued', function( file ) {
			var $li = $(
					'<div id="' + file.id + '" class="file-item thumbnail">' +
						'<img>' +
						'<input type="hidden" value="" name="pics[]" />'+
						'<div class="progress"><div style="width: 30%" class="progress-bar progress-bar-palegreen"></div></div>'+
						'<div class="info"><a href="javascript:void(0)" onclick="removeFileItem(this);">删除</a></div>' +
					'</div>'
					),
			$img = $li.find('img');
			
			$info = $li.find('.info');
			$progress = $li.find('.progress');
			
			$info.hide();
			$progress.show();
			
			// $list为容器jQuery实例
			$("#thelist").append($li);
		
			// 创建缩略图
			// 如果为非图片文件，可以不用调用此方法。
			// thumbnailWidth x thumbnailHeight 为 100 x 100
			uploader.makeThumb( file, function( error, src ) {
				if ( error ) {
					$img.replaceWith('<span>不能预览</span>');
					return;
				}
				$img.attr( 'src', src );
			}, 120, 120 );
			
			uploader.upload();
			
			uploader.on( 'uploadProgress', function( file, percentage ) {
				 var v = percentage*100;
				 $("#"+file.id).find('.progress').css('width',v+'%');
			});
			uploader.on( 'uploadSuccess', function( file ,response) {
			     	$("#"+file.id).find('.info').show();
					$("#"+file.id).find('.progress').hide();
					$("#"+file.id).find('input').val(response.url);
			});
			
		});
		
		}
	}
	
	$(document).ready(function () {
		validate('#dataForm');
	    var form = new Form('dataForm');
		form.init(<{json data=$item}>);
		
		changModel(<{$item->type}>);
		
	    KindEditor.ready(function(K) {
                window.editor = K.create('#content',{
					uploadJson : '<{url path="tools/upload" }>',
					fileManagerJson : '<{url path="tools/filemanager" }>',
					allowFileManager : true,
					filterMode:false
				});
        });
	});
</script>